<template>
  <view class="travel-chat">
    <!-- 顶部搜索栏 -->
    <view class="search-section">
      <view class="search-bar">
        <image src="/static/images/search-icon.png" mode="aspectFit" class="search-icon" />
        <input 
          type="text" 
          v-model="searchText" 
          placeholder="搜索对话" 
          class="search-input"
          @input="handleSearch"
        />
      </view>
    </view>

    <!-- 对话列表 -->
    <scroll-view class="chat-list" scroll-y="true" scroll-x="true">
      <view class="chat-item" v-for="(chat, index) in chats" :key="index" @click="handleChatClick(chat)">
        <image v-if="chat.avatar" :src="chat.avatar" mode="aspectFill" class="avatar" />
        <default-avatar v-else class="avatar" />
        <view class="chat-info">
          <view class="chat-header">
            <text class="chat-name">{{ chat.name }}</text>
            <text class="chat-time">{{ chat.time }}</text>
          </view>
          <view class="chat-preview">
            <text class="chat-message">{{ chat.lastMessage }}</text>
            <view v-if="chat.unread" class="unread-badge">
              <text class="unread-count">{{ chat.unread }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import BottomNav from '@/components/BottomNav.vue'
import DefaultAvatar from '@/components/DefaultAvatar.vue'

export default {
  name: 'TravelChatPage',
  components: {
    BottomNav,
    DefaultAvatar
  },
  data() {
    return {
      currentPath: '/pages/chat/TravelChatPage',
      searchText: '',
      chats: [
        {
          id: 1,
          name: '旅行助手',
          lastMessage: '您好，我是您的旅行助手，有什么可以帮您？',
          time: '10:30',
          unread: 2
        },
        {
          id: 2,
          name: '行程规划',
          lastMessage: '您的行程已更新，请查看最新安排',
          time: '昨天',
          unread: 0
        },
        {
          id: 3,
          name: '景点推荐',
          lastMessage: '根据您的喜好，为您推荐以下景点...',
          time: '周一',
          unread: 0
        }
      ]
    }
  },
  methods: {
    handleSearch(e) {
      // 这里可以添加搜索逻辑
      console.log('搜索内容：', this.searchText)
    },
    handleChatClick(chat) {
      uni.navigateTo({
        url: `/pages/chat/ChatDetailPage?id=${chat.id}`,
        success: () => {
          console.log('Successfully navigated to chat detail')
        },
        fail: (err) => {
          console.error('Navigation failed:', err)
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style>
.travel-chat {
  font-family: 'Poppins', sans-serif;
  background-color: #FFFFFF;
  min-height: 100vh;
  padding-bottom: 90px; /* 为底部导航栏留出空间 */
}

.search-section {
  padding: 16px;
  background-color: #FFFFFF;
  position: sticky;
  top: 0;
  z-index: 10;
}

.search-bar {
  background-color: #F0F0F0;
  border-radius: 16px;
  padding: 12px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.search-icon {
  width: 20px;
  height: 20px;
  opacity: 0.5;
}

.search-input {
  flex: 1;
  font-size: 15px;
  color: #000000;
  background-color: transparent;
}

.placeholder {
  font-size: 15px;
  color: #89807A;
}

.chat-list {
  height: calc(100vh - 120px);
  padding: 0 16px;
}

.chat-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #F0F0F0;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  object-fit: cover;
}

.chat-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-right: 50px;
}

.chat-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.chat-name {
  font-size: 15px;
  font-weight: 600;
  color: #000000;
}

.chat-time {
  font-size: 13px;
  color: #89807A;
}

.chat-preview {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.chat-message {
  font-size: 13px;
  color: #89807A;
  flex: 1;
  margin-right: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.unread-badge {
  background-color: #26C992;
  border-radius: 12px;
  padding: 2px 8px;
  min-width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.unread-count {
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
}
</style> 